import { ActionType, ProFormRadio, ProList } from '@ant-design/pro-components';
import { Avatar, Button, Card, Space, Tag } from 'antd';
import { useEffect, useRef, useState } from 'react';
import DetailReports from './DetailReports';
import { FieldTimeOutlined, FireOutlined, LikeOutlined, MessageOutlined, StarOutlined, TikTokOutlined, WeiboSquareOutlined } from '@ant-design/icons';
import React from 'react';
import { reportPage } from '@/services/api/api-interview-record';
import { history } from '@umijs/max';

const defaultData = [
  {
    id: '1',
    source: '',//发布站点
    contributionTitle: '',
    lastVersionTime: '',
    totalSpread: '',
    docChannel: '',//栏目
    themeType: '',
    likeNum: '',
    weiboSpread: '',
    dySpread: '',
  },
];


interface DetailsTabelReportsProps {
  id: string;
  title: string;
}

const TabelReports: React.FC<DetailsTabelReportsProps> = ({ id, title, }) => {
  const [dataSource, setDataSource] = useState<InterviewRecordData.reportDetail>(defaultData);
  const actionRef = useRef<ActionType>();

  const IconText = ({ icon, text }: { icon: any; text: string }) => (
    <span>
      {React.createElement(icon, { style: { marginInlineEnd: 8 } })}
      {text}
    </span>
  );
  const [sortType, setSortType] = useState(1); // 1: 按时间排序, 2: 按热度排序  
  const [pagination, setPagination] = useState({ current: 1, pageSize: 20, total: 0 });

  // 数据获取  
  const fetchData = async (current, pageSize) => {
    const response = await reportPage({
      keyWords: title,
      current,
      pageSize,
    });
    if (response.code === 0) {
      // setDataSource(defaultData);
      setDataSource(response.data.data);
      setPagination({ current, pageSize, total: response.data.total });
    }
  };

  // 监听 title 和 pagination 的变化  
  useEffect(() => {
    fetchData(pagination.current, pagination.pageSize);
  }, [title, pagination.current, pagination.pageSize]);

  // 根据选定的排序方式对数据进行排序  
  const sortedData = () => {
    return [...dataSource].sort((a, b) => {
      if (sortType === 1) {
        return new Date(b.lastVersionTime) - new Date(a.lastVersionTime); // 按时间排序  
      } else {
        return b.totalSpread - a.totalSpread; // 按热度排序  
      }
    });
  };

  const handleRedirect = (articleId: string, themeName: string, themeId: string) => {
    console.log(articleId, themeName, themeId);
    const monitorEndTime = "2100-08-01 00:00:00"
    const monitorStartTime = "2000-01-10 23:59:59"
    const firstUrl = "https://moc.ljsyy.net/guangda.html?nav=menu_p4_0&url=https%3A%2F%2Fcbdn-test.ljsyy.net%2Fworkbench%2F%23%2Fhome%2Fquality-estimate%2Fspread-monitor%2Ftheme-monitor-list-relatedrepor"
    const url = `/?backPath=themeMonitorList&id=${themeId}&monitorEndTime=${monitorEndTime}&monitorStartTime=${monitorStartTime}&themeName=${themeName}&articleId=${articleId}`
    window.open(firstUrl+url, "_blank")
    // const data = {
    //   themeId,
    //   monitorEndTime,
    //   monitorStartTime,
    //   themeName,
    //   articleId
    // }
    // window.parent.postMessage({ message: data }, '*')
    // setTimeout(() => {
    //   window.open(firstUrl, "_blank")
    // }, 1000);
  }


  return (
    <Card title="相关报道"
      style={{ marginTop: 20 }}
      extra={
        <>
          {/* <Button onClick={handleSortByTime} icon={<FieldTimeOutlined />}>时间</Button>
            <Button onClick={handleSortBytotalSpread} icon={<FireOutlined />}>热度</Button> */}
          <div style={{ display: 'flex', margin: 'auto' }}>
            <ProFormRadio.Group
              style={{ alignItems: 'center', marginTop: 10 }}
              name="type"
              radioType="button"
              initialValue={1}
              options={[
                {
                  label: (
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <FieldTimeOutlined />
                      <span style={{ marginLeft: 5 }}>时间</span>
                    </div>
                  ),
                  value: 1,
                },
                {
                  label: (
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <FireOutlined />
                      <span style={{ marginLeft: 5 }}>热度</span>
                    </div>
                  ),
                  value: 2,
                },
              ]}
              fieldProps={{
                buttonStyle: 'solid',
                style: { marginTop: 23 },
                onChange: (e) => {
                  console.log(e.target.value);
                  const value = e.target.value
                  setSortType(value);
                }
              }}
            />
          </div>
        </>
      }  >
      <ProList<InterviewRecordData.reportPage>
        rowKey="documentId"
        actionRef={actionRef}
        ghost
        showActions="hover"
        editable={{
          onSave: async (key, record, originRow) => {
            console.log(key, record, originRow);
            return true;
          },
        }}
        pagination={{
          current: pagination.current,
          pageSize: pagination.pageSize,
          total: pagination.total,
          onChange: (page, pageSize) => {
            setPagination({ current: page, pageSize });
            fetchData(page, pageSize);
          }
        }}
        // request={async (params) => {
        //   // 在此处处理排序  
        //   return getReportList({
        //     ...params,
        //   });
        // }}\
        dataSource={sortedData()}
        metas={{
          title: {
            dataIndex: 'source',
            render: (text, row, index, action) => {
              return <div style={{ display: 'flex' }}>
                <div style={{ width: '17vw', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
                  <a onClick={() => handleRedirect(row.zbGuidChar, row.themeName, row.themeId)}>{row.contributionTitle}</a>
                  {/* <DetailReports detail={row} /> */}
                </div>

              </div>
            },
          },
          // avatar: {
          //   dataIndex: 'image',
          //   editable: false,
          // },
          actions: {
            render: (text, row, index, action) => [
              // <IconText
              //   icon={StarOutlined}
              //   text="156"
              //   key="list-vertical-star-o"
              // />,
              <span>{row.lastVersionTime}</span>
            ],
          },
          description: {
            render: (text, row, index, action) => [
              // <DetailReports detail={row}/>
              <>
                {/* <Space size={13} >
                  <IconText
                    icon={LikeOutlined}
                    text={row.likeNum}
                    key="list-vertical-like-o"
                  />
                  <IconText
                    icon={TikTokOutlined}
                    text={row.weiboSpread}
                    key="list-vertical-message"
                  />
                  <IconText
                    icon={WeiboSquareOutlined}
                    text={row.dySpread}
                    key="list-vertical-message"
                  />
                </Space> */}
                <Space size={0} style={{ marginLeft: 5 }}>
                  {row.source && <Tag color="blue">{row.source}</Tag>}
                  {row.docChannel && <Tag color="blue">{row.docChannel}</Tag>}
                  <Tag color="#f50">总传播量 : {row.totalSpread}</Tag>
                </Space>
              </>
            ],
          }
        }}
      // itemLayout="vertical"
      // metas={{
      //   title: {
      //     dataIndex: 'contributionTitle'
      //   },
      //   description: {
      //     render: (text, row, index, action) => (
      //       <>
      //         <Space size={0}>
      //           <Tag color="blue">{row.docChannel}</Tag>
      //           <Tag color="blue">{row.source}</Tag>
      //           <Tag color="#f50">总传播量 : {row.totalSpread}</Tag>
      //         </Space>
      //       </>
      //     ),
      //   },
      //   actions: {
      //     render: (text, row, index, action) => [
      //       <Space size={10} style={{ width: 300 }}>
      //         <IconText
      //           icon={LikeOutlined}
      //           text={row.likeNum}
      //           key="list-vertical-like-o"
      //         />
      //         <IconText
      //           icon={TikTokOutlined}
      //           text={row.weiboSpread}
      //           key="list-vertical-message"
      //         />
      //         <IconText
      //           icon={WeiboSquareOutlined}
      //           text={row.dySpread}
      //           key="list-vertical-message"
      //         />
      //       </Space>
      //     ],
      //   },
      //   extra: {
      //     render: (text, row) => (
      //       <>
      //         <span>{row.lastVersionTime}</span>
      //       </>
      //     ),
      //   },
      //   // content: {
      //   //   render: (text, row, index, action) => {
      //   //     return (
      //   //       <div>
      //   //       </div>
      //   //     );
      //   //   },
      //   // },
      // }}
      />
    </Card>
  );
};

export default TabelReports;